<template>
    <div class="commit page">
        <div class="con">
            <addr :address="address" @click.native="turn('/address')" v-if="address&&!hideAddress"></addr>

            <div class="cart-list">
                <div class="title">
                    <!--                    <img src="@/assets/avatar.png" alt="">-->
                    <!--                    <span class="name">衣香丽影官方旗舰店</span>-->
                </div>
                <div class="cart-item" v-for="(item,index) in cartListFilter" :key="index">
                    <order-item :item="item"></order-item>
                </div>
            </div>

<!--            <txt-input type="switch" style="margin-top: 0.133rem;height: 1.09rem" v-model="hideAddress"-->
<!--                       label="转入库存"></txt-input>-->

            <!--            <label-btn padding="0 0.426rem" nameColor="#A1A1A1" rightColor="#F7895E"-->
            <!--                       style="border-radius: 5px;margin-top: 5px " height="1.09rem" name="优惠券"-->
            <!--                       rightTxt="选择优惠券"></label-btn>-->

            <label-btn @click.native="showPayWay" padding="0 0.426rem" nameColor="#A1A1A1" rightColor="#F7895E"
                       style="border-radius: 5px;margin-top: 5px " height="1.09rem" name="支付方式"
                       :rightTxt="payWayOptions[payWay].text"></label-btn>

            <label-btn :canClick="false" padding="0 0.426rem" nameColor="#A1A1A1" rightColor="#4E3D07"
                       style="border-radius: 5px 5px 0 0 ;margin-top: 5px " height="1.09rem" name="商品金额"
                       :rightTxt="'¥ '+total[3]"></label-btn>
            <label-btn v-if="total[4]&&total[4]>0" :canClick="false" padding="0 0.426rem" nameColor="#A1A1A1"
                       rightColor="#4E3D07"
                       height="1.09rem" name="商品积分"
                       :rightTxt="'P '+total[4]"></label-btn>

            <label-btn :canClick="false" padding="0 0.426rem" nameColor="red" rightColor="red" height="1.09rem"
                       name="会员价优惠" :rightTxt="'-¥'+total[1]"></label-btn>

            <label-btn v-if="total[5]&&total[5]>0" :canClick="false" padding="0 0.426rem" nameColor="red"
                       rightColor="red" height="1.09rem"
                       name="优惠券抵扣" :rightTxt="'-¥'+total[5]"></label-btn>

            <label-btn v-if="!hideAddress" :canClick="false" padding="0 0.426rem" nameColor="#A1A1A1"
                       rightColor="#4E3D07" height="1.09rem"
                       name="运费" :rightTxt="logFee"></label-btn>
            <label-btn v-if="account" :canClick="false" padding="0 0.426rem" nameColor="#A1A1A1" rightColor="#4E3D07"
                       height="1.09rem"
                       name="现金券余额" :rightTxt="account?account.cash:0"></label-btn>
            <!--            <label-btn v-if="accounts&&total[3]>0" :canClick="false" padding="0 0.426rem" nameColor="#A1A1A1" rightColor="#4E3D07" height="1.09rem"-->
            <!--                       name="积分余额" :rightTxt="accounts[1]?accounts[1].amount:0"></label-btn>-->
            <!--            <label-btn v-if="accounts&&total[4]>0" :canClick="false" padding="0 0.426rem" nameColor="#A1A1A1" rightColor="#4E3D07" height="1.09rem"-->
            <!--                       name="优惠券余额" :rightTxt="accounts[2]?accounts[2].amount:0"></label-btn>-->


            <label-btn @click.native="showRemark" :canClick="false" padding="0 0.426rem" nameColor="#A1A1A1"
                       rightColor="#4E3D07" height="1.09rem"
                       name="备注/提货卡密码" :rightTxt="remark?remark:'请填写提货卡/备注信息'"></label-btn>


            <cube-select
                    ref="payWay"
                    style="display: none"
                    v-model="payWay"
                    :options="payWayOptions">
            </cube-select>

            <commit-bar @click.native="commitOrder" :price="total[0]" :amount="total[2]" txt="提交订单"></commit-bar>
        </div>
    </div>
</template>

<script>
    import labelBtn from "@/components/base/label-btn"
    import commitBar from "@/components/commit-bar"
    import txtInput from "@/components/base/txt-input"
    import {listCart, getLogFee} from "@/api/cart";
    import orderItem from '@/components/order-item'
    import {listAddress, commitOrder} from "@/api/order";
    import addr from '@/components/addr'
    import {info} from "../../api/user";
    import {config} from "../../util/wx";
    import Wx from '@/wx'
    import {getAddress} from "@/api/order";
    export default {
        activated() {
            info().then(res => {
                this.accounts = res.extra.accounts
            })
            listCart().then(res => {
                this.cartList = res.data
            })
            if (this.$route.query.addressId) {
                this.showAddress = true
                getAddress(this.$route.query.addressId).then(res => {
                    this.address = res.data
                })
            }else {
                listAddress().then(res => {
                    if (res.data.length == 0) {//地址不存在
                        this.showAlert()
                    }
                    for (let i = 0; i < res.data.length; i++) {
                        let ad = res.data[i]
                        this.address = ad
                        if (ad.def) {
                            break
                        }
                    }
                })
            }

            //微信配置
            config()

        },
        beforeRouteLeave(to, from, next) {
            if (this.alert) {
                this.alert.hide()
            }
            next()
        },
        data() {
            return {
                payConfig:null,
                logFee: 0,
                accounts: null,
                cartList: [],
                imgH: process.env.VUE_APP_IMG_DOMAIN,
                address: null,
                alert: null,
                hideAddress: false,
                orderType: 0,
                remark: null,
                payWayOptions: [{value: 0, text: "现金券"}, {value: 1, text: "微信"}],
                // payWayOptions:[{value:0,text:"现金券"}],
                payWay: 1,//默认微信支付

            }
        },
        methods: {
            wxPay(){
                if (this.payConfig) {
                    Wx.pay(this.payConfig).then(res => {
                        // Dialog.showCorrect("操作成功")
                        // this.$router.back()
                        this.$router.replace("/order")
                    })
                }
            },
            computeLogFee() {
                if (this.address && !this.hideAddress) {
                    getLogFee(this.address.province).then(res => {
                        if (res.data > 0) {
                            this.logFee = res.data
                        }
                    })
                } else {
                    this.logFee = 0
                }
            },
            showRemark() {
                this.dialog = this.$createDialog({
                    type: 'prompt',
                    title: '备注',
                    prompt: {
                        value: this.remark,
                        placeholder: '请输入'
                    },
                    onConfirm: (e, promptValue) => {
                        this.remark = promptValue
                        const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
                        window.scrollTo(0, Math.max(scrollHeight - 1, 0))
                        // 移动
                        // this.$createToast({
                        //     type: 'warn',
                        //     time: 1000,
                        //     txt: `Prompt value: ${promptValue || ''}`
                        // }).show()
                    }
                }).show()
            },
            turn(path) {
                this.$router.replace(path)
            },
            showAlert() {
                this.alert = this.$createDialog({
                    type: 'alert',
                    title: '',
                    content: '请先添加地址!',
                    icon: 'cubeic-alert',
                    onConfirm: () => {
                        this.$router.push('/address')
                    }
                }).show()
            },
            commitOrder() {
                // let address = this.address
                //转货
                if (this.hideAddress) {
                    this.orderType = 1
                }else {
                    this.orderType = 0
                }
                let data = {
                    orderType: this.orderType,
                    ...this.address,
                    remark: this.remark,
                    payWay: this.payWay
                }

                //支付方式
                commitOrder(data).then(res => {

                    if (this.payWay == 0) {//现金券支付
                        this.turn('/order')
                    } else {//会返回支付参数
                        if(res.data=="ZERO"){// 0元
                            this.turn('/order')
                        }else {
                            this.payConfig = res.data
                            this.wxPay()
                        }
                    }
                })
            },
            showPayWay() {
                this.$refs.payWay.$el.click()
            }
        },
        computed: {
            account() {
                let map = {
                    cash: 0,
                    point: 0,
                    coupon: 0
                }
                if (!this.accounts) {
                    return map
                }
                this.accounts.forEach(item => {
                    switch (item.type) {
                        case 0:
                            map.cash = item.amount;
                            break;
                        case 1:
                            map.point = item.amount;
                            break;
                        case 2:
                            map.coupon = item.amount;
                            break;
                    }
                })
                return map
            },
            total() {//总购物车信息计算  总价格 总优惠 是否是全选
                let totaNowPrice = 0
                let totaOldPrice = 0
                let totalAmount = 0
                let totalPoint = 0
                let totalCoupon = 0
                this.cartList.forEach(cart => {
                    if(cart.selected==true){
                        totaNowPrice += cart.nowPrice * cart.quantity
                        totaOldPrice += cart.oldPrice * cart.quantity
                        totalPoint += cart.point * cart.quantity
                        totalCoupon += cart.coupon * cart.quantity
                        totalAmount += cart.quantity
                    }
                })
                // totaNowPrice += this.logFee
                //优惠券
                if (this.account && this.account.coupon) {
                    if (this.account.coupon < totalCoupon) {
                        totalCoupon = this.account.coupon
                    }
                } else {
                    totalCoupon = 0
                }
                let total = totaNowPrice + this.logFee - totalCoupon
                if (total < 0){
                    total = 0;
                }
                return [total.toFixed(2), (totaOldPrice - totaNowPrice).toFixed(2), totalAmount, totaNowPrice.toFixed(2), totalPoint.toFixed(2), totalCoupon.toFixed(2)]
            },
            cartListFilter() {
                return this.cartList.filter(c => {

                    return c.selected
                })
            }
        },
        components: {
            labelBtn, commitBar, orderItem, txtInput, addr
        },
        watch: {
            hideAddress() {
                this.computeLogFee()
                console.log(this.address+"--")
            },
            address() {
                this.computeLogFee()
            }
        }
    }
</script>

<style scoped lang="stylus">
    .commit
        /*overflow hidden*/
        height 100%
        background url("~@/assets/cbg.png") no-repeat $page-bg
        background-size 100%

        .con
            padding 10px 10px 50px

            .address
                padding 20px 0
                background-color white
                border-radius 5px
                display flex
                align-items center

                .s-btn
                    display flex
                    align-items center
                    justify-content center
                    flex 0 0 43px

                    .iconfont
                        color #F0C808
                        font-size 24px

                .info
                    padding-right 18px
                    flex 1

                    .user
                        font-size 0
                        margin-bottom 13px

                        .name
                            color #4E3D07
                            font-size 16px
                            line-height 16px

                        .phone
                            color $font-color-light
                            font-size 14px
                            line-height 14px
                            font-weight 300
                            margin-left 12px

                    .detail
                        color #4E3D07
                        font-size 12px
                        font-weight 300
                        line-height 15px

                .right
                    flex 0 0 38px
                    display flex
                    align-items center
                    justify-content center

                    .iconfont
                        font-size 12px
                        color #6F6F6F

            .cart-list
                border-radius 5px
                margin-top 10px
                padding 10px 10px
                background-color white

                .title
                    display flex
                    align-items center
                    margin-bottom 6px
                    font-size 0

                    img
                        width 24px
                        height 24px

                    .name
                        margin-left 6px
                        color #4E3D07
                        font-size 14px
                        line-height 14px


</style>
